<template>
  <div class="wangji">
    <div class="box">
        <div class="warp">
            <div class="logo">
                <img src="../assets/jiazhenglogo.png" alt="">
            </div>
            <div class="zhuce">
                <div class="shadow" v-show="shadow">
                    修改成功！2秒后跳转至登录<br>
                    <i class="el-icon-success green"></i>
                </div>
                <div class="top">
                    修改密码
                </div>
                <div class="modify">
                    <div class="tip">密码可以包含数字和字母，并且必须大于等于六位</div>
                    旧密码：<input type="password" v-model="old"><br><br>
                    新密码：<input type="password" v-model="pw"><br><br><br>
                    <button @click="success" v-bind:class="{'dis':fag}" v-bind:disabled='!fag'>修改完成</button>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            active: 0,
            pw:'',
            old:'',
            fag:false,
            shadow:false,
        }
    },
    watch:{
        old(){
            if(this.old!=''&&this.pw!=''){
                this.fag=true
            }else{
                this.fag=false
            }
        },
        pw(){
            if(this.old!=''&&this.pw!=''){
                this.fag=true
            }else{
                this.fag=false
            }
        }
    },
    methods:{
        get(){
            this.$router.push('/personal');
        },
        success(){
            console.log(localStorage.getItem('password'));
            if (localStorage.getItem('password') == this.old) {
                 if(localStorage.getItem('password')!=this.pw){
                var pattern = /^[\w_-]{6,16}$/;
                if(pattern.test(this.pw)){
                    
                    var tkoen = window.localStorage.getItem('token')
                    console.log(tkoen);
                    this.myaxios({
                        url:'http://housekeepi.com/api/rePassword',
                        method:'post',
                        data:{
                            token:tkoen,
                            pw:this.pw,
                            old:this.old,
                        }
                    }).then((res,config)=>{
                        
                    },()=>{}).catch(()=>{})
                    setTimeout(() => {
                        this.get()
                    }, 2000);
                    this.shadow=true;
                     window.localStorage.setItem("password",this.pw)
                }else{
                this.$message.error('密码格式不正确！');
                }
            }else{
                this.$message.error('新密码与旧密码重复！');
            }
            }else{
                 this.$message.error('与原密码不一致！');
            }
           
            // console.log(localStorage.getItem('password'));
            // if (localStorage.getItem('password')!=this.pw) {
            //     var pattern = /^[\w_-]{6,16}$/;
            // }
        }
    }
}
</script>

<style scoped>
.box{
  width: 100%;
}
.warp{
  position: relative;
  width: 1200px;
  box-sizing: border-box;
  padding: 50px;
  margin: 100px auto 0px;
  background-color: rgb(245, 245, 245);
}
.logo{
  position: absolute;
  top: -100px;
}
.zhuce{
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 20px;
    padding-bottom: 30px;
}
.top{
    height:60px;
    line-height: 60px;
    text-align: center;
    border-bottom: 1px solid rgb(239, 239, 239);
}
.dis{
    background-color: rgb(228,57,60);
    color: #fff;
}
.buzhou{
    padding: 100px;
    padding-bottom: 30px;
}
.userin{
    padding: 20px 140px 30px 140px;
    font-size: 18px;
    text-align: center;
}
.identity{
    padding: 20px 140px 30px 140px;
    font-size: 18px;
    text-align: center;
}
.modify{
    margin-top:40px;
    position: relative;
    padding: 20px 140px 30px 140px;
    font-size: 18px;
    text-align: center;
}
input{
    width: 200px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-indent: 10px;
    border: 1px solid rgb(230, 230, 230);
}
button{
    width: 150px;
    height: 30px;
    border: none;
    border-radius: 10px;
}
.tip{
    font-size: 12px;
    position: absolute;
    color: #ccc;
    top: 28px;
    left: 700px;
}
.shadow{
    position: fixed;
    z-index: 999;
    width: 440px;
    height: 250px;
    top: 250px;
    left: 50%;
    margin-left: -200px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    font-size: 30px;
    line-height: 100px;
}
.green{
    color: greenyellow;
    font-size: 120px;
}
</style>